<template>
    <rx-dialog style="height: 100%;" @handOk="onOk" @cancel="cancel">
        <a-form  layout="vertical" class="rx-a-form-vertical">
            <a-form-item :label="i18n('customPage','页面定制')">
                <rx-input-button v-model="dialogVal"
                                 @click="selectCustomView"
                >
                </rx-input-button>
            </a-form-item>
            <a-form-item :label="i18n('preMethod','前置方法')">
                <a-input v-model="config.preMethod" :placeholder="i18n('preMethodName','前置方法名称')" ></a-input>
            </a-form-item>
            <a-form-item :label="i18n('callback','回调方法')">
                <a-input v-model="config.callBack" :placeholder="i18n('callBack','在表单方法名,参数为') +'(action,data)'" ></a-input>
            </a-form-item>
            <a-form-item :label="i18n('openMode','打开方式')">
                <open-mode  :local-config="config" ></open-mode>
            </a-form-item>
            <a-form-item :label="i18n('paramConfig','参数配置')">
                <a-table :dataSource="config.params" :pagination="false"
                         rowKey="idx_">
                    <a-table-column :title="i18n('pageCustomParam','页面定制参数')" dataIndex="bindFieldLabel" width="150px">
                        <template slot-scope="text, record">
                            <a-form-item class="tableItems">
                                {{ record.bindFieldLabel }}
                            </a-form-item>
                        </template>
                    </a-table-column>
                    <a-table-column :title="i18n('mappingMode','映射方式')" dataIndex="mappingMode" width="150px">
                        <template slot-scope="text, record">
                            <a-select v-model:value="record.mappingMode" :allowClear="true" :options="mappingList" style="width: 100%;"
                                      :getPopupContainer="p=>p.parentNode" @change="changeMappingMode(record)">
                            </a-select>
                        </template>
                    </a-table-column>
                    <a-table-column :title="i18n('bindValue','绑定字段')" dataIndex="returnField" width="300px">
                        <template slot-scope="text, record">
                            <template v-if="record.mappingMode=='fixed'">
                                <a-input v-model:value="record.returnValue" style="width:calc(100% - 10px);" :placeholder="i18n('fixedPlaceholer','请输入值')"></a-input>
                            </template>
                            <template v-else-if="record.mappingMode=='script'">
                                <a-input v-model:value="record.returnValue" style="width:calc(100% - 10px);" :placeholder="i18n('scriptPlaceholer','请输入脚本方法名称')"></a-input>
                            </template>
                            <div v-else class="for-double">
                                <div class="openFormConfig-select"><a-select v-model:value="record.curTable" :getPopupContainer="p=>p.parentNode" :allowClear="true" @change="curTableChange(record)" :options="curTables" /></div>
                                <div class="openFormConfig-select"><a-select :key="record.curTable" :allowClear="true" :getPopupContainer="p=>p.parentNode" v-model:value="record.returnValue" :options="getFields(record.curTable,curBoEntity)" /></div>
                            </div>
                        </template>
                    </a-table-column>
                </a-table>
            </a-form-item>
        </a-form>
    </rx-dialog>
</template>

<script>
import {RxDialog, Util} from "@lowcode/jpaas-common-lib";
import CustomViewDialog from "@/views/modules/form/core/dialog/CustomViewDialog";
import FormBoDefApi from "@/api/form/bo/formBoDef";
import OpenMode from "@/views/modules/form/core/listCommon/OpenMode";
export default {
    name: "FormOpenCustomView",
    components: {OpenMode},
    props:{
        layerid:{
            type:String
        },
        lydata:{
            type:Object
        },
        destroy:Function,
        pkId:{
            type:String
        },
        customConfig:{
            type:Object
        },

    },
    data(){
        return{
            dialogVal: "",
            config: {
                alias: "",//alias
                name: "",//名称
                params:[],
                callBack:"",
                //窗口大小
                isMax:"YES",
                height:600,
                width:800
            },
            //当前表单
            curBoEntity:"",
            curTables:[],
            curFields:[],
            mappingList: [
                {value: "mapping", label:this.i18n('field','字段')},
                {value: "script", label:this.i18n('script','脚本')},
                {value: "fixed", label:this.i18n('fixedVar','固定值')}
            ],
        }
    },
    created(){
        if(this.customConfig && this.customConfig.alias){
            this.config=this.customConfig;
            this.dialogVal = JSON.stringify({text: this.config.name, value: this.config.alias});
        }
        this.getBoEntity(this.pkId,"cur");
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"formSolution.openCustomView",key);
        },
        changeMappingMode(row) {
            row.returnValue=""
            row.curTable = ""
        },
        curTableChange(record){
            this.$set(record,"returnValue","");
            let curTable=this.curTables.find(item=>{
                if(record.curTable==item.value){
                    return true;
                }
            });
            if(curTable){
                this.$set(record,"curType",curTable.type);
            }else {
                this.$set(record,"curType",'');
            }
            this.$forceUpdate()
        },
        selectCustomView(){
            var self_=this;
            var config = {
                curVm: this,
                widthHeight: ['800px', '600px'],
                component: CustomViewDialog,
                title:this.i18n('pageCustomTitle','页面定制'),
            };
            Util.open(config, function (action,data) {
                if (action != 'ok') return;
                self_.dialogVal = JSON.stringify({text: data.name, value: data.alias});
                self_.config.alias=data.alias;
                self_.config.name=data.name;
                //将旧的参数清空
                self_.config.params=[];
                if(data.params){
                    var params=JSON.parse(data.params);
                    for (let i = 0; i < params.length; i++) {
                        self_.config.params.push({
                            bindFieldLabel:params[i].value,
                            returnValue:""
                        })
                    }
                }else {
                    self_.config.params=[];
                }
            })
        },
        //获取当前表单全部数据
        getBoEntity(boDefId,type){
            let needCommon=type=="cur";
            FormBoDefApi.getByDefIdCommonField({boDefId:boDefId,needCommon:needCommon}).then(res=>{
                if(res.success){
                    this.curBoEntity= res.data.formBoEntity;
                    this.curTables= this.getTables(this.curBoEntity);
                }
            });
        },
        getTables(boEntity){
            let tables=[];
            if(boEntity){
                //主表
                tables.push({
                    value:boEntity.alias,
                    label:boEntity.name,
                    type: boEntity.boRelation.type
                })
                if(boEntity.boEntityList){
                    for (let i = 0; i < boEntity.boEntityList.length; i++) {
                        if(boEntity.boEntityList[i].boRelation.type!='onetomany')
                        tables.push({
                            value:  boEntity.boEntityList[i].alias,
                            label:  boEntity.boEntityList[i].name,
                            type: boEntity.boEntityList[i].boRelation.type
                        })
                    }
                }
            }
            return tables;
        },
        getFields(table,boEntity){
            let fields=[];
            if(!table){
                return fields;
            }
            if(boEntity.alias==table){
                for (let i = 0; i <  boEntity.boAttrList.length; i++) {
                    fields.push({
                        value:boEntity.boAttrList[i].name,
                        label:boEntity.boAttrList[i].comment,
                    })
                }
            }else {
                if(boEntity.boEntityList){
                    for (let i = 0; i < boEntity.boEntityList.length; i++) {
                        let obj=boEntity.boEntityList[i];
                        if(obj.alias==table){
                            for (let i = 0; i <  obj.boAttrList.length; i++) {
                                fields.push({
                                    value:obj.boAttrList[i].name,
                                    label:obj.boAttrList[i].comment,
                                })
                            }
                            break;
                        }
                    }
                }
            }
            return fields;
        },
        onOk() {
            Util.closeWindow(this, "ok", this.config);
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },
    }
}
</script>

<style scoped>
.for-double{
    display: flex;
}
</style>